<template>
  <div v-loading="formLoading" class="detail-container">
    <el-page-header :content="details.noticeTitle" @back="goBack" />
    <!-- <h2 style="font-weight: 400">{{ details.noticeTitle }}</h2> -->
    <p style="font-size: 12px; color: #999999">
      <span v-if="details.publishervo != null"> 发布人：{{ details.publishervo.username }} </span>
      &emsp;
      <span>
        通知类型：
        <label>
          {{ noticeTypeName }}
        </label>
      </span>
      &emsp;
      <span>发布时间：{{ details.cts }}</span>
    </p>
    <div style="margin-top: 30px; line-height: 25px" v-html="details.noticeContent"></div>
  </div>
</template>

<script>
import { useTabsStore } from "@/stores/modules/tabs";
// import { handleActivePath } from "@/utils/routes";
import { useRoute, useRouter } from "vue-router";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { getDetails, getLocalStorage } from "@/api/mains";

export default defineComponent({
  name: "UserNoticeDetail",
  components: {},
  setup() {
    const route = useRoute();
    const router = useRouter();
    const tabsStore = useTabsStore();
    const keepAliveStore = useKeepAliveStore();
    //const { delVisitedRoute } = tabsStore;
    const { proxy } = getCurrentInstance();

    const state = reactive({
      formLoading: false,
      id: route.query.id,
      url: "system/notice",
      NoticeType: [],
      noticeTypeName: "",
      details: []
    });

    const detailsfn = async () => {
      state.formLoading = true;
      const res = await getDetails(state.url, state.id);
      state.formLoading = false;
      if (res.data != null) {
        state.NoticeType = getLocalStorage().NoticeType;
        state.details = res.data;
        state.NoticeType.forEach(item => {
          if ((item.dictValue = state.details.noticeType)) {
            state.noticeTypeName = item.dictLabel;
          }
        });
      }
    };

    const goBack = async () => {
      /* const detailPath = await handleActivePath(route, true);
      await router.back();
      await delVisitedRoute(detailPath); */

      tabsStore.removeTabs(route.fullPath);
      keepAliveStore.removeKeepAliveName(route.name);
      await router.push({ name: "UserNoticeList" });
    };

    const handleRefreshMainPage = () => {
      proxy.$pub("reload-router-view", "index");
    };

    nextTick(() => {
      state.route = {
        params: route.query
      };
      detailsfn();
    });

    return {
      ...toRefs(state),
      goBack,
      handleRefreshMainPage
    };
  }
});
</script>

<style lang="scss" scoped>
.detail-container {
  height: 82vh;
  padding: 20px;
  background-color: var(--el-bg-color);
}
</style>
